<template>
  <div class="num-reverse">
    <a-form
      :model="form"
      labelAlign="left"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
    >
      <a-form-item label="数值" class="form-item-1">
        <a-input
          v-model:value.number="form.num"
          type="number"
          @input="inputNum"
        ></a-input>
      </a-form-item>
      <a-form-item label="倒数" class="form-item-2">
        <span>{{ reverseNum }}</span>
      </a-form-item>
    </a-form>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const form = ref({ num: 0 })
const reverseNum = ref('0')
const arr = []
// arr.reverse
const numReverse = (num: number): string => {
  const remainderNum = num % 10
  const newNum = Math.floor(num / 10)
  return remainderNum + '' + (newNum < 10 ? newNum : numReverse(newNum))
}
const inputNum = () => {
  reverseNum.value = numReverse(form.value.num)
  console.log(
    'inputNum',
    form.value.num,
    typeof form.value.num,
    reverseNum.value,
    typeof reverseNum.value
  )
}
</script>
<style lang="scss" scoped>
.num-reverse {
  .form-item-1 {
    // 在 style/inde.css 中设置 在 main 中引入
    background-color: var(--main-bgc);
  }
  .form-item-2 {
    // 在 style/global.scss 中设置 在 vite.config.js 中引入
    background-color: $main-bgc;
  }
}
</style>
